<template>
	<div  class="header_options">
		<img class="logo" ref="element"   src="../../../../src/assets/images/bi/bi-upnav.png" alt="">
		<div class="header_options_nav">
				<router-link class="header_options_btn" to="/work">工作首页</router-link>
				<router-link  class="header_options_btn" to="/home">后台系统</router-link>
				<!-- <span class="header_options_user">
					<img src="../../../../src/assets/images/bi/user.png" alt="">
          <i class="current-date">{{currentDate}}</i>
				</span> -->
        <user
          :message-unread-count="unreadCount"
          :user-avator="userAvator"
          :user-name="userInfo.name"
          :user-type="userInfo.userType"
          :time-flag="timeflag"
        />
		</div>


	</div>
</template>

<script>
  import User from '%/modules/home/user'
  import {
    getUserInLocalstorage
  } from '@/libs/util'
	export default {
	  name: 'bi-header',
    components: {
      User
    },
	  data() {
	    return {
			currentDate:"",
      timeflag:true,
      userInfo: {}
	    }
	  },
	  created(){
		  this.showRealTime();
		  setInterval(()=>{
			  this.showRealTime()
		  },1000)
      this.userInfo = getUserInLocalstorage()
	  },
	  mounted(){
		  this.getHeight();

	  },
    computed:{
      unreadCount() {
        return this.$store.state.user.unreadCount
      },
      userAvator() {
        return this.$store.state.user.avatorImgPath
      },
    },
	  methods: {
		getHeight(){
			let w = window['innerWidth'] || document.documentElement.clientWidth;
			let hw =  w/1920 * 89 + 25;
			this.$emit("getHeaderHeight", hw);
		},
		showRealTime(){
			let d = new Date();
			let year = d.getFullYear();
			let month = d.getMonth() + 1;
			let date = d.getDate();
			let day = d.getDay();
			let hour = (d.getHours() < 10) ? ("0" + d.getHours()) : d.getHours();
			let min = (d.getMinutes() < 10) ? ("0" + d.getMinutes()) : d.getMinutes();
			let sec = (d.getSeconds() < 10) ? ("0" + d.getSeconds()) : d.getSeconds();
			// let now = year + "-" + month + "-" + date + "-" + hour + ":" + min + ":" + sec;
			let now = hour + ":" + min + ":" + sec;
			this.currentDate = now;
		},


	  }
	}
</script>

<style>

	.header_options {
	    margin:15px 0 10px;
		position: relative;
	}
	.header_options .logo{
		width: 100%;
		height: auto;
	}
	.header_options_nav {
		position: absolute;
		top:0px;
		right: 20px;
	}
	.header_options_btn {
		display: inline-block;
		width: 94px;
		height: 34px;
		text-align: center;
		line-height: 34px;
		color: #fff;
		margin-right: 50px;
		background-image: url('../../../../src/assets/images/bi/btn_no.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		cursor: pointer;
	}
	.header_options_btn:hover{
		color:#32C6C4;
		background-image: url('../../../../src/assets/images/bi/btn_on.png');
	}
	.header_options_btn.on {
		color:#32C6C4;
		background-image: url('../../../../src/assets/images/bi/btn_on.png');
	}
	.header_options_user{
		color: #fff;
	}
	.header_options_user img{
		width: 26px;
		height: 26px;
		vertical-align: middle;
		margin-right: 3px;
	}
  .header_options_user .current-date{
    display: inline-block;
    width: 55px;
    text-align: left;
    font-style: normal;
  }
</style>
